import axios from 'axios'

export default {
  data () {
    return {
      // 表格数据
      usersData: [
        {
          username: '傻春',
          email: 'shachun@qq.com',
          mobile: '1233211234567'
        }
      ],
      // total 总个数
      total: 0,
      // 当前页
      pagenum: 1,
      // 搜索文本
      searchText: '',
      // 是否显示添加用户对话框
      dialogAddUserVisible: false,
      // 添加用户表单对象
      addUserForm: {
        username: '',
        password: '',
        email: '',
        mobile: ''
      },
      // 校验规则 :
      rules: {
        // 校验username
        username: [
          // 判断是否输入
          { required: true, message: '请输入用户名', trigger: 'blur' },
          // 判断格式是否正确
          { min: 3, max: 5, message: '长度在3-5之间', trigger: 'blur' }
        ],
        // 校验password
        password: [
          // 判断是否输入
          { required: true, message: '请输入密码', trigger: 'blur' },
          // 判断格式是否正确
          { min: 5, max: 10, message: '长度在5-10之间', trigger: 'blur' }
        ],
        // 校验 邮箱
        email: [
          // 判断格式是否正确
          {
            pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ],
        // 校验 手机
        mobile: [
          // 判断格式是否正确
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '格式不正确',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  created () {
    this.loadUsersData()
  },
  methods: {
    // 获取用户数据
    async loadUsersData (pagenum = 1, query = '') {
      // 格式 axios.get(url,config(params 和 headers))
      const url = 'http://localhost:8888/api/private/v1/users'
      const config = {
        params: {
          query,
          pagenum,
          pagesize: 2
        },
        headers: {
          Authorization: localStorage.getItem('token')
        }
      }
      let res = await axios.get(url, config)
      console.log(res)
      // 把表格数据保存起来
      this.usersData = res.data.data.users
      // 把总个数保存起来
      this.total = res.data.data.total
      // 把当前页保存起来
      this.pagenum = res.data.data.pagenum

      // axios
      //   .get('http://localhost:8888/api/private/v1/users', {
      //     params: {
      //       query,
      //       pagenum,
      //       pagesize: 2
      //     },
      //     headers: {
      //       Authorization: localStorage.getItem('token')
      //     }
      //   })
      //   .then(res => {
      // console.log(res)
      // // 把表格数据保存起来
      // this.usersData = res.data.data.users
      // // 把总个数保存起来
      // this.total = res.data.data.total
      // // 把当前页保存起来
      // this.pagenum = res.data.data.pagenum
      //   })
    },
    // 改变页数 = 点击分页
    // 参数 : 就是点击的当前页
    changeCurPage (curPage) {
      console.log('点击了分页:', curPage)
      this.loadUsersData(curPage, this.searchText)
    },
    // 开始查询
    startQuery () {
      // console.log(this.searchText);
      // searchText : t
      // 获取 t 的第一页数据
      this.loadUsersData(1, this.searchText)
    },
    // 显示添加用户对话框
    showAddUserDialog () {
      this.dialogAddUserVisible = true
    },
    // 添加用户
    addUser () {
      // 格式 :  axios.post(url,data,config)
      // config : {}   params headers
      axios
        .post('http://localhost:8888/api/private/v1/users', this.addUserForm, {
          headers: {
            Authorization: localStorage.getItem('token')
          }
        })
        .then(res => {
          console.log(res)
          if (res.data.meta.status === 201) {
            // 1. 隐藏对话框
            this.dialogAddUserVisible = false
            // 2. 提示
            this.$message({
              message: '添加用户成功',
              type: 'success',
              duration: 800
            })
            // 3. 刷新一下
            this.loadUsersData()
          }
        })
    }
  }
}
